<template>
  <div class="my-nav">
    <h3>{{ $store.getters.num }}个任务未完成</h3>
    <ul class="nav">
      <li
        :class="{ active: $store.state.status == 'all' }"
        @click="changeStatus('all')"
      >
        全部任务
      </li>
      <li
        :class="{ active: $store.state.status == true }"
        @click="changeStatus(true)"
      >
        已完成
      </li>
      <li
        :class="{ active: $store.state.status == false }"
        @click="changeStatus(false)"
      >
        未完成
      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapMutations(["changeStatus"]),
    //辅助函数
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.my-nav {
  display: flex;
  justify-content: space-between;
  .nav {
    display: flex;
    width: 50%;
    height: 50px;
    justify-content: space-around;
    align-items: center;
  }
}
.active {
  border: 1px solid pink;
}
</style>
